<template>
	<view class="vertical-steps">
		<view class="msgicon" v-if="!list1.length">
			<image src="https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/wxnone.png" mode="widthFix">
			</image>
			<view class="msgtext">
				暂无内容
			</view>
		</view>
		<!-- 遍历步骤数据 -->
		<view v-for="(step, index) in list1" :key="index" class="step"
			:class="{ 'active': index === currentStep, 'completed': index < currentStep }">
			<!-- 左侧圆点和连接线 -->
			<view class="step-line-container">
				<view class="xin1" v-if="index < list1.length - 1">

				</view>
				<view class="step-icon">
					<view class="xin"></view>
				</view>
				<!-- 非最后一步时显示连接线 -->
				<view v-if="index < list1.length - 1" class="step-line"></view>
			</view>
			<!-- 右侧内容 -->
			<view class="step-content" @click="addbc(step.id)">
				<view class="datebox">
					<view class="datetext">
						{{step.check_time}}
					</view>
					<image src="https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/removeicon.png" @click.stop="shanchu(step)" mode=""
						class="closeicon"></image>
				</view>
				<view class="zhenduanbox">
					<view class="center">
						<view class="line">
							<span style="color:#1D2129 ;">检查项目：</span>
							<span>{{step.item}}</span>
						</view>
						<view class="line">
							<span style="color:#1D2129 ;">检查医院：</span>
							<span>{{step.hospital}}
							</span>
						</view>
						<view class="line">
							<span style="color:#1D2129 ;">检查结果：</span>
							<span>{{step.result}}</span>
						</view>

						<view class="line">
							<span style="color:#1D2129 ;">相关图片：</span>
						</view>
						<view class="line">
							<view class="images">
								<image :src="ite" :key="indx" v-for="(ite,indx) in step.images"
									@click.stop="previewImage(index,step.images)" mode=""></image>
							</view>
						</view>
						<view class="line">
							<span style="color:#1D2129 ;">备注：</span>
							<span>{{step['remark']}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="height: 194rpx;">

	</view>
	<view class="fixed">
		<view class="btn" @click="addbc1">
			添加检查
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue'
	import {
		$api
	} from '../../../ulm'
	const emit = defineEmits(['scfun1']) // 定义事件
	const props = defineProps({
		list1: {
			type: Array,
			required: true
		},
	})
	const steps = ref([{
			title: "提交订单",
			desc: "2023-10-01 12:00"
		},
		{
			title: "支付完成",
			desc: "2023-10-01 12:05"
		},
		{
			title: "商家发货",
			desc: "待完成"
		},
		{
			title: "确认收货",
			desc: "待完成"
		}
	])
	const currentStep = ref(1)

	function addbc(id) {
		uni.navigateTo({
			url: '/sub_index/index/addjiancha?id=' + id
		})
	}

	function previewImage(index, arr) {
		wx.previewImage({
			current: arr[index], // 当前显示图片的http链接
			urls: arr // 需要预览的图片http链接列表
		});
	}

	function addbc1() {
		uni.navigateTo({
			url: '/sub_index/index/addjiancha'
		})
	}

	function shanchu(item) {
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '是否要删除该条病程记录', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					// 执行确定后的逻辑
					shanchu1(item)
				} else if (res.cancel) {
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {
				console.error('弹窗调用失败', err);
			}
		});
	}
	async function shanchu1(item) {
		const res = await $api.delCheckupRecord({
			id: item.id
		})
		if (res.code == 1) {
			emit('scfun1')
		}
	}
</script>
<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.fixed {
		width: 100%;
		height: 194rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;
		z-index: 999;

		.btn {
			width: 686rpx;
			height: 82rpx;
			background: #2AB4F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 32rpx;
		}
	}

	.vertical-steps {
		width: 674rpx;
		margin: auto;
		margin-top: 20rpx;

		.step {

			display: flex;
			position: relative;

			/* 左侧圆点和连接线容器 */
			.step-line-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 24rpx;
				position: relative;

				.xin1 {
					width: 20rpx;
					height: 20rpx;
					background: #CDEDFD;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					/* 偏移自身宽高的一半 */
					border-radius: 50%;
				}

				.step-icon {

					border-radius: 50%;
					background: #2AB4F5;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 4rpx;
					z-index: 2;


					.xin {
						width: 16rpx;
						height: 16rpx;
						background: rgba(255, 255, 255, 0.52);
						border-radius: 50%;
					}
				}

				.step-line {
					flex: 1;
					width: 2rpx;
					border-right: 2rpx #B4E7FF dashed;
					// background: #ccc;
				}
			}

			/* 右侧内容 */
			.step-content {
				flex: 1;
				padding-left: 20rpx;

				.datebox {
					width: 632rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.closeicon {
						width: 35rpx;
						height: 35rpx;
					}

					.datetext {
						padding: 0 20rpx;
						height: 50rpx;
						background: #2AB4F5;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						text-align: center;
						line-height: 50rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
					}
				}

				.zhenduanbox {
					width: 632rpx;
					overflow: hidden;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding: 32rpx 0;
					margin-top: 24rpx;
					margin-bottom: 32rpx;

					.center {
						width: 576rpx;
						overflow: hidden;
						margin: auto;

						.line {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							margin-bottom: 20rpx;

							.images {
								width: 100%;
								display: flex;
								flex-wrap: wrap;

								image {
									width: 246rpx;
									height: 134rpx;
									border-radius: 12rpx 12rpx 12rpx 12rpx;
									margin-right: 10rpx;
									margin-bottom: 10rpx;
								}
							}
						}
					}
				}

				// .step-title {
				// 	display: block;
				// 	font-size: 28rpx;
				// 	font-weight: bold;
				// 	color: #333;
				// }

				// .step-desc {
				// 	display: block;
				// 	font-size: 24rpx;
				// 	color: #999;
				// 	margin-top: 8rpx;
				// }
			}

			/* 动态状态 */
			&.active {
				.step-icon {
					background: #3a9aff;
					box-shadow: 0 0 0 4rpx rgba(58, 154, 255, 0.2);
				}

				.step-title {
					color: #3a9aff;
				}
			}

			&.completed {
				.step-icon {
					background: #2AB4F5;
				}

				.step-line {
					// background: #2AB4F5;
				}
			}
		}
	}
</style>